<template>
  <div class="home-body">
    <div class="body-left">
      <div class="left-one">
        <div class="left-title">
          <div
            class="item"
            v-for="(item, index) in baziList"
            :key="item.id"
            @click="changeBazi(index)"
            :class="ids === index ? 'active' : ''"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="left-box">
          <!-- 切换 -->
          <div class="showbox">
            <div
              v-show="isOne"
              class="box-item"
              v-for="(item, index) in baziMessage"
              @click.once="dianji(index, item)"
              :class="{ liang: arr1.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isTwo"
              class="box-item"
              v-for="(item, index) in baziMessage2"
              @click.once="dianji(index, item)"
              :class="{ liang: arr2.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isThr"
              class="box-item"
              v-for="(item, index) in baziMessage3"
              @click.once="dianji(index, item)"
              :class="{ liang: arr3.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isFour"
              class="box-item"
              v-for="(item, index) in baziMessage4"
              @click.once="dianji(index, item)"
              :class="{ liang: arr4.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isFive"
              class="box-item"
              v-for="(item, index) in baziMessage5"
              @click.once="dianji(index, item)"
              :class="{ liang: arr5.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isSix"
              class="box-item"
              v-for="(item, index) in baziMessage6"
              @click.once="dianji(index, item)"
              :class="{ liang: arr6.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              v-show="isEve"
              class="box-item"
              v-for="(item, index) in baziMessage7"
              @click.once="dianji(index, item)"
              :class="{ liang: arr7.includes(index) }"
              :key="item.id"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/zt.png" alt="" /> 状态<span>{{
                  item.isshow
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/mz.png" alt="" /> 命中<span
                  >{{ item.number }}次</span
                >
              </p>
            </div>
          </div>
        </div>
        <div class="left-choose">
          <div class="ch-title">已选择：</div>
          <!-- 选中框1 -->
          <div class="ch-save">
            <p>
              侧转靶：<span>{{ arrList1 }}</span>
            </p>
            <p>
              升降靶：<span>{{ arrList2 }}</span>
            </p>
            <p>
              凸显靶：<span>{{ arrList3 }}</span>
            </p>
            <p>
              摇摆靶：<span>{{ arrList4 }}</span>
            </p>
            <p>
              起倒靶：<span>{{ arrList5 }}</span>
            </p>
            <p>
              多功能靶：<span>{{ arrList6 }}</span>
            </p>

            <p>
              多靶型：<span>{{ arrList7 }}</span>
            </p>
          </div>
          <!-- <div class="choose">
              <div class="sure" @click="save1()">
                <img src="../assets/img/index/sure.png" alt="" />
              </div>
              <div class="close" @click="delete1()">
                <img src="../assets/img/index/close.png" alt="" />
              </div>
            </div> -->
        </div>
      </div>
      <div class="left-two">
        <div class="left-title">
          <div
            class="item"
            v-for="(item, index) in baziList2"
            :key="item.id"
            :class="idx === index ? 'active' : ''"
            @click="changeBazi2(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="left-box">
          <!-- 切换 -->
          <div class="showbox">
            <div
              class="box-item"
              v-show="isEight"
              v-for="(item, index) in baziMessage8"
              :key="index"
              @click.once="dianji2(index, item)"
              :class="{ liang: arr8.includes(index) }"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/speed.png" alt="" /> 速度<span>{{
                  item.speed
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/stop.png" alt="" /> 停车点<span>{{
                  item.space
                }}</span>
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              class="box-item"
              v-show="isNine"
              v-for="(item, index) in baziMessage9"
              :key="index"
              @click.once="dianji2(index, item)"
              :class="{ liang: arr9.includes(index) }"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/speed.png" alt="" /> 速度<span>{{
                  item.speed
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/stop.png" alt="" /> 停车点<span>{{
                  item.space
                }}</span>
              </p>
            </div>
          </div>
          <div class="showbox">
            <div
              class="box-item"
              v-show="isTen"
              v-for="(item, index) in baziMessage10"
              :key="index"
              @click.once="dianji2(index, item)"
              :class="{ liang: arr10.includes(index) }"
            >
              <h5>{{ item.name }}</h5>
              <p>
                <img src="../assets/img/index/speed.png" alt="" /> 速度<span>{{
                  item.speed
                }}</span>
              </p>
              <p class="pp">
                <img src="../assets/img/index/stop.png" alt="" /> 停车点<span>{{
                  item.space
                }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="left-choose">
          <div class="ch-title">已选择：</div>
          <!-- 选中框2 -->
          <div class="ch-save">
            <p>
              侧转靶：<span>{{ arrList8 }}</span>
            </p>
            <p>
              升降靶：<span>{{ arrList9 }}</span>
            </p>
            <p>
              凸显靶：<span>{{ arrList10 }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="body-right">
      <div class="center">
        <div class="cen-top">
          <div class="top-moshi">
            <!-- 输入框 -->
            <el-input placeholder="几次隐靶" v-model="hit" clearable>
            </el-input>
            <el-input
              class="aaa"
              placeholder="几秒显靶"
              v-model="display"
              clearable
            >
            </el-input>
            <div class="setting">
              <img src="../assets/img/index/set.png" alt="" />
            </div>
          </div>
          <div class="set-btn">
            <div class="jiance" @click="jiance()">
              <img src="../assets/img/index/gzjc.png" alt="" />
            </div>
            <div class="qingchu" @click="qingling()">
              <img src="../assets/img/index/ql.png" alt="" />
            </div>
          </div>
        </div>
        <!-- 靶标分组 -->
        <div class="cen-mid">
          <div class="swiths">
            <el-switch
              v-model="switchs"
              active-color="#52fffa"
              inactive-color="#10405c"
              @change="sw"
            >
            </el-switch>
          </div>
          <div class="mid-box">
            <div
              class="box-item"
              :class="babiaoId === index && switchs === true ? 'active' : ''"
              @click="changeBb(index)"
              v-for="(item, index) in babiaoList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <!-- 靶车分组 -->
        <div class="cen-bottom">
          <div class="mid-box">
            <div
              class="box-item"
              :class="bacheId === index ? 'active' : ''"
              @click="changeBc(index)"
              v-for="(item, index) in bacheList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 编程文件界面 -->
        <div class="right-top">
          <div class="jindu">
            <div class="jindu-title">进度</div>
            <!-- 进度条 -->
            <el-progress
              :percentage="percentage"
              :stroke-width="10"
              :color="customColor"
            ></el-progress>
          </div>

          <div class="top-box">
            <div
              class="top-item"
              :class="proId === index ? 'active' : ''"
              @click="chengPro(index)"
              v-for="(item, index) in programList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="bc-btn">
            <button class="run" :disabled="isDisable" @click="runing()">
              <!-- <img src="../assets/img/index/run.png" alt="" /> -->
            </button>
            <!-- <div class="run" @click="debounceMethods(runing)">
              <img src="../assets/img/index/run.png" alt="" />
            </div> -->
            <div class="stopp" @click="stopping()">
              <img src="../assets/img/index/stopp.png" alt="" />
            </div>
          </div>
        </div>
        <!-- 控制界面 -->
        <div class="ringht-center">
          <div class="cen-title">
            <div class="btn1" @click="btn1">
              <img
                v-if="btnShow1"
                src="../assets/img/index/control/sdxz.png"
                alt=""
              />
              <img
                v-if="!btnShow1"
                src="../assets/img/index/control/sdmr.png"
                alt=""
              />
            </div>
            <div class="btn2" @click="btn2">
              <img
                v-if="btnShow2"
                src="../assets/img/index/control/zdmr.png"
                alt=""
              />
              <img
                v-if="!btnShow2"
                src="../assets/img/index/control/zdxz.png"
                alt=""
              />
            </div>
          </div>
          <div class="bb">
            <img src="../assets/img/index/bb.png" alt="" />
          </div>
          <!-- 手动 -->
          <div class="bb-con" v-show="!auto">
            <div
              class="con-item"
              :class="manualId === index ? 'active' : ''"
              @click="changeManual(index)"
              v-for="(item, index) in ManualList"
              :key="index"
            >
              {{ item }}
            </div>

            <!-- <div class="con-item con-active">隐靶</div> -->
          </div>
          <!-- 自动 -->
          <div class="bb-con" v-show="auto">
            <div class="showtime">
              显靶时间
              <el-input class="q" placeholder="几次隐靶" v-model="hit">
              </el-input>
            </div>
            <div class="nontime">
              隐靶时间
              <el-input class="w" placeholder="几次隐靶" v-model="hit">
              </el-input>
            </div>
            <div class="times">
              显隐次数
              <el-input class="e" placeholder="几次隐靶" v-model="hit">
              </el-input>
            </div>
            <div class="zd-btn">
              <div class="run" @click="runing2()">
                <img src="../assets/img/index/run.png" alt="" />
              </div>
              <div class="stopp" @click="stopping2()">
                <img src="../assets/img/index/stopp.png" alt="" />
              </div>
            </div>
          </div>
          <div class="bc">
            <img src="../assets/img/index/bc.png" alt="" />
          </div>
          <!-- 靶车速度 -->
          <div class="speed">
            <span>运行速度</span>
            <el-select v-model="run" placeholder="请选择" style="width: 100px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>自动停车点</span>
            <el-select v-model="stop" placeholder="请选择" style="width: 100px">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="go">
            <div class="goo">
              <img src="../assets/img/index/control/前进.png" alt="" />
            </div>
            <div class="back">
              <img src="../assets/img/index/control/后退.png" alt="" />
            </div>
            <div class="wait">
              <img src="../assets/img/index/control/暂停.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from "../common/common";
export default {
  name: "Show",
  data() {
    return {
      // swithch开关
      switchs: false,
      // 靶标分组数据
      babiaoList: ["分组一", "分组二", "分组三"],
      // 靶标id
      babiaoId: 0,
      // 靶车分组数据
      bacheId: 0,
      bacheList: ["分组一", "分组二", "分组三"],
      // 编程文件数据
      proId: 0,
      programList: ["编程文件1", "编程文件2", "编程文件3"],
      // 手动
      manualId: 0,
      ManualList: ["显靶1", "显靶2", "隐靶", "开灯", "关灯", "快闪", "慢"],
      // 禁止按钮
      isDisable: false,
      btnShow1: true,
      btnShow2: true,
      options: [
        {
          value: "选项1",
          label: "1S",
        },
        {
          value: "选项2",
          label: "5S",
        },
        {
          value: "选项3",
          label: "10S",
        },
        {
          value: "选项4",
          label: "15S",
        },
        {
          value: "选项5",
          label: "20S",
        },
      ],
      run: "",
      options2: [
        {
          value: "选项1",
          label: "1S",
        },
        {
          value: "选项2",
          label: "5S",
        },
        {
          value: "选项3",
          label: "10S",
        },
        {
          value: "选项4",
          label: "15S",
        },
        {
          value: "选项5",
          label: "20S",
        },
      ],
      stop: "",
      // 进度条
      percentage: 0,
      customColor: "#409eff",
      // 选中靶子
      // 标题下标
      ids: 0,
      // 靶子标题
      baziList: [
        {
          id: 0,
          name: "侧转靶",
        },
        {
          id: 1,
          name: "升降靶",
        },
        {
          id: 2,
          name: "凸显靶",
        },
        {
          id: 3,
          name: "摇摆靶",
        },
        {
          id: 4,
          name: "起倒靶",
        },
        {
          id: 5,
          name: "多功能靶",
        },
        {
          id: 6,
          name: "多靶型",
        },
      ],
      idx: 0,
      // 靶车标题
      baziList2: [
        {
          id: 0,
          name: "侧转靶",
        },
        {
          id: 1,
          name: "升降靶",
        },
        {
          id: 2,
          name: "凸显靶",
        },
      ],
      // 靶子详情
      baziMessage: [
        {
          id: 1,
          name: "标靶1",
          isshow: "显靶",
          number: 5,
        },
        {
          id: 2,
          name: "标靶2",
          isshow: "显靶",
          number: 5,
        },
        {
          id: 3,
          name: "标靶3",
          isshow: "显靶",
          number: 5,
        },
        {
          id: 4,
          name: "标靶4",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage2: [
        {
          id: 1,
          name: "起倒靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage3: [
        {
          id: 1,
          name: "升降靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage4: [
        {
          id: 1,
          name: "凸显靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage5: [
        {
          id: 1,
          name: "摇摆靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage6: [
        {
          id: 1,
          name: "多功能靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage7: [
        {
          id: 1,
          name: "多靶1",
          isshow: "显靶",
          number: 5,
        },
      ],
      baziMessage8: [
        {
          id: 1,
          name: "标靶1",
          speed: "10km/h",
          space: "二仙桥",
        },
        {
          id: 2,
          name: "标靶2",
          speed: "30km/h",
          space: "成华大道",
        },
        {
          id: 3,
          name: "标靶3",
          speed: "50km/h",
          space: "二仙桥",
        },
        {
          id: 4,
          name: "标靶4",
          speed: "20km/h",
          space: "成华大道",
        },
      ],
      baziMessage9: [
        {
          id: 1,
          name: "标靶1",
          speed: "10km/h",
          space: "二仙桥",
        },
        {
          id: 2,
          name: "标靶2",
          speed: "30km/h",
          space: "成华大道",
        },
        {
          id: 3,
          name: "标靶3",
          speed: "50km/h",
          space: "二仙桥",
        },
      ],
      baziMessage10: [
        {
          id: 1,
          name: "标靶3",
          speed: "50km/h",
          space: "二仙桥",
        },
        {
          id: 2,
          name: "标靶4",
          speed: "20km/h",
          space: "成华大道",
        },
      ],
      // 命中输入框
      hit: "",
      // 几秒显示
      display: "",
      // 选择靶子
      dianji1: false,
      // 靶子下标预存
      arr1: [],
      arr2: [],
      arr3: [],
      arr4: [],
      arr5: [],
      arr6: [],
      arr7: [],
      arr8: [],
      arr9: [],
      arr10: [],
      // 选择框中的标题(页面显示)
      arrList1: "",
      arrList2: "",
      arrList3: "",
      arrList4: "",
      arrList5: "",
      arrList6: "",
      arrList7: "",
      arrList8: "",
      arrList9: "",
      arrList10: "",
      // 后台发送标题
      chooseAllList: [
        { id: 1, name: [] },
        { id: 2, name: [] },
        { id: 3, name: [] },
        { id: 4, name: [] },
        { id: 5, name: [] },
        { id: 6, name: [] },
        { id: 7, name: [] },
      ],
      chooseAllList2: [
        { id: 1, name: [] },
        { id: 2, name: [] },
        { id: 3, name: [] },
      ],
      titles: [],
      // 靶子显示与隐藏
      isOne: true,
      isTwo: false,
      isTwo: false,
      isThr: false,
      isFour: false,
      isFive: false,
      isSix: false,
      isEve: false,
      isEight: true,
      isNine: false,
      isTen: false,
      // 自动切换
      auto: false,
      // 创建定时器
      timer: null,
      // 靶标数字累计判断显示值
      num1: 0,
    };
  },
  components: {},
  mounted() {},
  methods: {
    // 切换手动
    btn1() {
      this.btnShow1 = this.btnShow2 = true;
      this.auto = false;
    },
    // 切换自动
    btn2() {
      this.btnShow2 = this.btnShow1 = false;
      this.auto = true;
    },
    // 选中靶子
    changeBazi(index) {
      console.log("靶子下标", index);
      this.ids = index;
      if (index === 0) {
        this.isOne = true;
        this.isTwo =
          this.isThr =
          this.isFour =
          this.isFive =
          this.isSix =
          this.isEve =
            false;
      } else if (index === 1) {
        this.isTwo = true;
        this.isOne =
          this.isThr =
          this.isFour =
          this.isFive =
          this.isSix =
          this.isEve =
            false;
      } else if (index === 2) {
        this.isThr = true;
        this.isOne =
          this.isTwo =
          this.isFour =
          this.isFive =
          this.isSix =
          this.isEve =
            false;
      } else if (index === 3) {
        this.isFour = true;
        this.isOne =
          this.isThr =
          this.isTwo =
          this.isFive =
          this.isSix =
          this.isEve =
            false;
      } else if (index === 4) {
        this.isFive = true;
        this.isOne =
          this.isThr =
          this.isFour =
          this.isTwo =
          this.isSix =
          this.isEve =
            false;
      } else if (index === 5) {
        this.isSix = true;
        this.isOne =
          this.isThr =
          this.isFour =
          this.isFive =
          this.isTwo =
          this.isEve =
            false;
      } else if (index === 6) {
        this.isEve = true;
        this.isOne =
          this.isThr =
          this.isFour =
          this.isFive =
          this.isSix =
          this.isTwo =
            false;
      }
    },
    changeBazi2(index) {
      this.idx = index;
      if (index === 0) {
        this.isEight = true;
        this.isNine = this.isTen = false;
      } else if (index === 1) {
        this.isNine = true;
        this.isEight = this.isTen = false;
      } else {
        this.isTen = true;
        this.isEight = this.isNine = false;
      }
    },
    // 已选择靶子标题
    dianji(i, item) {
      if (this.ids === 0) {
        if (this.arr1.includes(i)) {
          this.arr1 = this.arr1.filter(function (ele) {
            return ele != i;
          });
          // 删除后四位
          // this.arrList1 = this.arrList1.slice(0, this.arrList1.length - 4);
        } else {
          this.arr1.push(i);

          this.arrList1 = this.arrList1 + item.name + "、";
          this.chooseAllList[0].name.push(item.name);
        }
       
      } else if (this.ids === 1) {
        if (this.arr2.includes(i)) {
          this.arr2 = this.arr2.filter(function (ele) {
            return ele != i;
          });
          this.arrList2 = this.arrList2.slice(0, this.arrList2.length - 4);

        } else {
          this.arr2.push(i);
          this.arrList2 = this.arrList2 + item.name + "、";
          this.chooseAllList[1].name.push(item.name);
        }
      } else if (this.ids === 2) {
        if (this.arr3.includes(i)) {
          this.arr3 = this.arr3.filter(function (ele) {
            return ele != i;
          });
          // this.arrList3 = this.arrList3.slice(0, this.arrList3.length - 4);

        } else {
          this.arr3.push(i);
          this.arrList3 = this.arrList3 + item.name + "、";
          this.chooseAllList[2].name.push(item.name);
        }
      } else if (this.ids === 3) {
        if (this.arr4.includes(i)) {
          this.arr4 = this.arr4.filter(function (ele) {
            return ele != i;
          });
          // this.arrList4 = this.arrList4.slice(0, this.arrList4.length - 4);

        } else {
          this.arr4.push(i);
          this.arrList4 = this.arrList4 + item.name + "、";
          this.chooseAllList[3].name.push(item.name);
        }
      } else if (this.ids === 4) {
        if (this.arr5.includes(i)) {
          this.arr5 = this.arr5.filter(function (ele) {
            return ele != i;
          });
          // this.arrList5 = this.arrList5.slice(0, this.arrList5.length - 4);

        } else {
          this.arr5.push(i);
          this.arrList5 = this.arrList5 + item.name + "、";
          this.chooseAllList[4].name.push(item.name);
        }
      } else if (this.ids === 5) {
        if (this.arr6.includes(i)) {
          this.arr6 = this.arr6.filter(function (ele) {
            return ele != i;
          });
          // this.arrList6 = this.arrList6.slice(0, this.arrList6.length - 4);

        } else {
          this.arr6.push(i);
          this.arrList6 = this.arrList6 + item.name + "、";
          this.chooseAllList[5].name.push(item.name);
        }
      } else {
        if (this.arr7.includes(i)) {
          this.arr7 = this.arr7.filter(function (ele) {
            return ele != i;
          });
          // this.arrList7 = this.arrList7.slice(0, this.arrList7.length - 4);

        } else {
          this.arr7.push(i);
          this.arrList7 = this.arrList7 + item.name + "、";
          this.chooseAllList[6].name.push(item.name);
        }
      }
      console.log(this.chooseAllList);
      
    },
    // 已选择靶车标题
    dianji2(i, item) {
      if (this.idx === 0) {
        if (this.arr8.includes(i)) {
          this.arr8 = this.arr8.filter(function (ele) {
            return ele != i;
          });
        } else {
          this.arr8.push(i);
          this.arrList8 = this.arrList8 + item.name + "、";
          this.chooseAllList2[0].name.push(item.name);
        }
      } else if (this.idx === 1) {
        if (this.arr9.includes(i)) {
          this.arr9 = this.arr9.filter(function (ele) {
            return ele != i;
          });
        } else {
          this.arr9.push(i);
          this.arrList9 = this.arrList9 + item.name + "、";
          this.chooseAllList2[1].name.push(item.name);
        }
      } else {
        if (this.arr10.includes(i)) {
          this.arr10 = this.arr10.filter(function (ele) {
            return ele != i;
          });
        } else {
          this.arr10.push(i);
          this.arrList10 = this.arrList10 + item.name + "、";
          this.chooseAllList2[2].name.push(item.name);
        }
      }
      console.log(this.chooseAllList2);
    },
    // 靶标分组选中
    changeBb(index) {
      this.babiaoId = index;
    },
    changeBc(index) {
      this.bacheId = index;
    },
    // 编程分组选中
    chengPro(index) {
      this.proId = index;
    },
    // 手动选中
    changeManual(index) {
      this.manualId = index;
    },
    // 运行
    runing() {
      this.isDisable = true;

      this.timer = setInterval(() => {
        this.percentage += 10;
        if (this.percentage >= 100) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    stopping() {
      this.isDisable = false;
      clearInterval(this.timer);
      this.percentage = 0;
    },
    runing1() {
      this.timer = setInterval(() => {
        this.percentage += 10;
        if (this.percentage >= 100) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    stopping1() {
      clearInterval(this.timer);
    },
    // 开关
    sw(e) {
      // console.log(e);
      // console.log(this.switchs);
    },
    // 故障检测按钮
    jiance(){
      alert('点击检测按钮')
    },
    // 清零按钮
    qingling(){
      alert('点击清零按钮')
    }
  },
};
</script>

<style scoped lang="less">
.home-body {
  margin: 100px 20px 0 10px;
  flex: 1;
  height: 88vh;
  display: flex;
  justify-content: space-between;
  .body-left {
    width: 49%;
    height: 100%;
    .left-one {
      width: 100%;
      height: 49%;
      padding-top: 20px;
      background-image: url("../assets/img/index/left-top.png");
      background-size: 100% 100%;
      .left-title {
        width: 90%;
        height: 28px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        .item {
          font-size: 14px;
          padding: 6px 20px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
        }
        .active {
          background-image: url("../assets/img/index/tabs.png");
          background-size: 100% 100%;
        }
      }
      .left-box {
        width: 92%;
        height: 50%;
        margin: 10px auto 0;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        .showbox {
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
        }
        .box-item {
          width: 120px;
          height: 100px;
          margin-left: 13px;
          word-wrap: break-word;
          background-image: url("../assets/img/index/bbmr.png");
          background-size: 100% 100%;
          h5 {
            width: 100%;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }
          p {
            width: 90%;
            height: 25px;
            line-height: 24px;
            color: #fff;
            font-size: 12px;
            margin: auto;
            text-align: left;
            img {
              width: 25px;
              height: 25px;
              margin-top: 3px;
              margin-right: -5px;
            }
            span {
              font-size: 15px;
              margin-left: 20px;
              line-height: 26px;
              color: #3dc1ff;
            }
          }
          .pp {
            width: 90%;
            height: 25px;
            line-height: 26px;
            color: #fff;
            font-size: 12px;
            margin: 4px auto 0;
            text-align: left;
            img {
              width: 25px;
              height: 25px;
              margin-top: 3px;
              margin-right: -5px;
            }
            span {
              font-size: 15px;
              margin-left: 20px;
              line-height: 26px;
              color: #40f8d8;
            }
          }
        }
        .liang {
          background-image: url("../assets/img/index/bzbj.png") !important;
        }
      }
      .left-choose {
        width: 92%;
        height: 135px;
        margin: 10px auto 0;
        background: linear-gradient(
          0deg,
          rgba(209, 133, 66, 0.4),
          rgba(209, 147, 66, 0.05)
        );
        border: 1px solid #ff9752;
        position: relative;
        .ch-title {
          height: 20px;
          line-height: 20px;
          padding-left: 5px;
          margin: 3px 0 0 5px;
          border-left: 4px solid #ff9752;
          color: #ff9752;
        }
        .ch-save {
          width: 95%;
          height: 75%;
          margin: 5px auto 0;
          overflow-y: auto;
          p {
            color: #ff9752;
            span {
              color: #fff;
            }
          }
        }
        .choose {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: space-between;
          position: absolute;
          top: 95px;
          left: 750px;
          .sure {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .close {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .left-two {
      width: 100%;
      height: 48%;
      padding-top: 20px;
      background-image: url("../assets/img/index/left-top.png");
      background-size: 100% 100%;
      .left-title {
        width: 90%;
        height: 30px;
        margin: auto;
        display: flex;
        .item {
          font-size: 14px;
          padding: 6px 20px;
          color: #fff;
          margin-right: 30px;
          text-align: center;
          cursor: pointer;
        }
        .active {
          background-image: url("../assets/img/index/bctabs.png");
          background-size: 100% 100%;
        }
      }
      .left-box {
        width: 92%;
        height: 50%;
        margin: 10px auto 0;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        .showbox {
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
        }
        .box-item {
          width: 185px;
          height: 100px;
          margin-left: 13px;
          word-wrap: break-word;
          background-image: url("../assets/img/index/bcmr.png");
          background-size: 100% 100%;
          h5 {
            width: 100%;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }
          p {
            width: 90%;
            height: 25px;
            line-height: 24px;
            color: #fff;
            font-size: 12px;
            margin: auto;
            text-align: left;
            img {
              width: 25px;
              height: 25px;
              margin-top: 3px;
              margin-right: -5px;
            }
            span {
              font-size: 15px;
              margin-left: 30px;
              line-height: 26px;
              color: #f07e32;
            }
          }
          .pp {
            width: 90%;
            height: 25px;
            line-height: 26px;
            color: #fff;
            font-size: 12px;
            margin: 4px auto 0;
            text-align: left;
            img {
              width: 25px;
              height: 25px;
              margin-top: 3px;
              margin-right: -5px;
            }
            span {
              font-size: 15px;
              margin-left: 20px;
              line-height: 26px;
              color: #40f8d8;
            }
          }
        }
        .liang {
          background-image: url("../assets/img/index/bcxz.png") !important;
        }
      }
      .left-choose {
        width: 92%;
        height: 135px;
        margin: 10px auto 0;
        background: linear-gradient(
          0deg,
          rgba(209, 133, 66, 0.4),
          rgba(209, 147, 66, 0.05)
        );
        border: 1px solid #ff9752;
        position: relative;
        .ch-title {
          height: 20px;
          line-height: 20px;
          padding-left: 5px;
          margin: 3px 0 0 5px;
          border-left: 4px solid #ff9752;
          color: #ff9752;
        }
        .ch-save {
          width: 95%;
          height: 75%;
          margin: 5px auto 0;
          overflow-y: auto;
          p {
            color: #ff9752;
            span {
              color: #fff;
            }
          }
        }
        .choose {
          width: 50px;
          height: 20px;
          display: flex;
          justify-content: space-between;
          position: absolute;
          top: 95px;
          left: 750px;
          .sure {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .close {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .body-right {
    width: 50%;
    height: 100%;
    display: flex;
    .center {
      margin-left: -10px;

      height: 100%;
      flex: 1;
      .cen-top {
        width: 98%;
        height: 300px;
        .top-moshi {
          width: 100%;
          height: 220px;
          background-image: url("../assets/img/index/moshi.png");
          background-size: 100% 100%;
          position: relative;
          // 调整输入框
          /deep/ .el-input {
            position: absolute;
            top: 30%;
            left: 40%;
            width: 100px;
            height: 30px;
          }
          // 修改输入框样式
          /deep/ .el-input__inner {
            height: 30px;
            font-size: 16px;
            color: #fff;
            border: none;
            text-align: center;
            line-height: 0px;
            background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));
          }
          /deep/ input::placeholder {
            font-size: 12px;
          }
          // 修改清空按钮
          /deep/ .el-input__suffix {
            padding: 0;
            margin-top: -5px;
          }
          .aaa {
            position: absolute;
            top: 62%;
            left: 40%;
            width: 100px;
            height: 30px;
          }
          .setting {
            position: absolute;
            width: 80px;
            height: 25px;
            top: 1px;
            left: 70%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .set-btn {
          width: 100%;
          margin: 10px auto 0;
          height: 60px;
          display: flex;
          justify-content: space-between;
          .jiance {
            width: 48%;
            height: 100%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
          .qingchu {
            width: 48%;
            height: 100%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
        }
      }
      .cen-mid {
        width: 98%;
        height: 32vh;
        background-image: url("../assets/img/index/group.png");
        background-size: 100% 100%;
        position: relative;
        .swiths {
          position: absolute;
          top: 20px;
          left: 85%;
        }
        .mid-box {
          width: 98%;
          height: 19vh;
          margin: auto;
          position: relative;
          top: 65px;
          overflow-y: auto;
          // 靶标盒子
          .box-item {
            width: 48%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            float: left;
            background-image: url("../assets/img/index/babmr.png");
            background-size: 100% 100%;
            margin-bottom: 15px;
          }
          .box-item:nth-child(2n) {
            margin-left: 10px;
          }
          .active {
            background-image: url("../assets/img/index/bbxz.png");
          }
        }
      }
      .cen-bottom {
        width: 98%;
        height: 29vh;
        background-image: url("../assets/img/index/bcgroup.png");
        background-size: 100% 100%;
        .mid-box {
          width: 98%;
          height: 18vh;
          margin: auto;
          position: relative;
          top: 75px;
          overflow-y: auto;
          .box-item {
            width: 48%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            float: left;
            background-image: url("../assets/img/index/babmr.png");
            background-size: 100% 100%;
            margin-bottom: 15px;
          }
          .box-item:nth-child(2n) {
            margin-left: 10px;
          }
          .active {
            background-image: url("../assets/img/index/bbxz.png");
          }
        }
      }
    }
    .right {
      height: 100%;
      flex: 1;
      .right-top {
        width: 97%;
        margin: auto;
        height: 340px;
        background-image: url("../assets/img/index/wenjian.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 60px;
        .jindu {
          width: 90%;
          .jindu-title {
            width: 40px;
            margin-left: 30px;
            color: #fff;
            font-weight: 600;
          }
          .el-progress {
            margin-top: 10px;
            margin-left: 50px;
            /deep/ .el-progress__text {
              color: #52f7ff;
            }
          }
        }
        .top-box {
          width: 85%;
          height: 150px;
          margin: auto;
          position: relative;
          top: 10px;
          overflow-y: auto;
          .top-item {
            width: 45%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            float: left;
            background-image: url("../assets/img/index/babmr.png");
            background-size: 100% 100%;
            margin-bottom: 15px;
          }
          .top-item:nth-child(2n) {
            margin-left: 20px;
          }
          .active {
            background-image: url("../assets/img/index/bbxz.png");
          }
        }
        .bc-btn {
          width: 60%;
          height: 40px;
          margin: auto;
          display: flex;
          justify-content: space-between;
          .run {
            width: 110px;
            height: 100%;
            background-color: transparent;
            background-image: url("../assets/img/index/run.png");
            background-size: 100% 100%;
            border: none;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .stopp {
            width: 110px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .ringht-center {
        width: 98%;
        margin: auto;
        margin-top: 30px;
        .cen-title {
          width: 180px;
          height: 25px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .btn1,
          .btn2 {
            width: 48%;
            height: 100%;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bb,
        .bc {
          width: 100px;
          height: 30px;
          margin-top: 10px;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bb-con {
          width: 94%;
          height: 120px;
          overflow-y: auto;
          margin: auto;
          position: relative;
          .con-item {
            width: 100px;
            height: 30px;
            float: left;
            background-image: url("../assets/img/index/babmr.png");
            background-size: 100% 100%;
            line-height: 30px;
            text-align: center;
            color: #fff;
            float: left;
            margin: 10px 15px 10px 10px;
          }
          .active {
            background-image: url("../assets/img/index/bbxz.png");
          }
          .showtime,
          .nontime,
          .times {
            float: left;
            margin: 5px 40px 10px 0;
            font-size: 15px;
            color: #62b3e6;
          }
          .zd-btn {
            width: 58%;
            height: 30px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            .run {
              width: 100px;
              height: 100%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .stopp {
              width: 100px;
              height: 100%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          // 调整输入框
          /deep/ .el-input {
            // background: linear-gradient(0deg, #1D577C, rgba(29, 87, 124, 0));
            width: 80px;
            height: 25px;
            margin-left: 5px;
          }
          // 修改输入框样式
          /deep/ .el-input__inner {
            height: 25px;
            font-size: 14px;
            color: #fff;
            border: none;
            text-align: center;
            line-height: 0px;
            background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));
          }
          /deep/ input::placeholder {
            font-size: 12px;
          }
          .con-active {
            background: linear-gradient(
              0deg,
              rgba(209, 133, 66, 0.4),
              rgba(209, 147, 66, 0.05)
            );
            border: 1px solid #ff9752;
          }
        }
        .speed {
          width: 98%;
          margin: auto;
          margin-top: 15px;
          span {
            font-size: 15px;
            color: #62b3e6;
            margin-right: 10px;
            margin-left: 10px;
          }
          /deep/ .el-select,
          /deep/ .el-input,
          /deep/ .el-input__inner {
            background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));

            color: #fff;
            border: 0px;
            border-radius: 5px;
            text-align: center;
            width: 100px;
            height: 25px;
          }

          //修改的是el-input上下的⼩图标的颜⾊
          /deep/ .el-select .el-input .el-select__caret {
            color: #fff;
          }

          //修改的是下拉框选项内容上⽅的尖⾓
          /deep/ .el-popper .popper__arrow,
          .el-popper .popper__arrow::after {
            display: none;
          }

          // 修改下拉框字体
          /deep/ .el-input__inner,
          .el-textarea__inner {
            font-size: 14px;
          }
          // 修改下拉箭头
          /deep/ .el-input__icon {
            height: 120%;
            line-height: 20px;
          }
          /deep/ .el-input__suffix {
            height: auto;
          }
        }
        .go {
          width: 90%;
          height: 160px;
          margin-top: 45px;
          background-image: url("../assets/img/index/control/kongzhibg.png");
          background-size: 100% 100%;
          .goo {
            width: 100px;
            height: 35px;
            position: relative;
            top: 45%;
            left: 8%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .back {
            width: 100px;
            height: 35px;
            position: relative;
            top: 20%;
            left: 70%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .wait {
            width: 100px;
            height: 35px;
            position: relative;
            top: 70%;
            left: 40%;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1300px) {
  .home-body {
    height: 520px;
    margin: 60px 0px 0 5px !important;
    .left-one {
      height: 48% !important;
      .left-title {
        width: 98% !important;
        .item {
          font-size: 12px !important;
          padding: 4px 10px !important;
        }
      }
      .left-box {
        width: 98% !important;
        height: 38% !important;
        margin: 3px auto 0 !important;
        .box-item {
          height: 80px !important;
          p {
            height: 15px !important;
            line-height: 15px !important;
            img {
              width: 20px !important;
              height: 20px !important;
              margin-top: -1px !important;
            }
            span {
              font-size: 14px !important;
              line-height: 18px !important;
            }
          }
          .pp {
            height: 20px !important;
            line-height: 20px !important;
          }
        }
      }
      .left-choose {
        height: 90px !important;
        .ch-title {
          font-size: 14px !important;
          margin: 1px 0 0 2px !important;
        }
        .ch-save {
          height: 70% !important;
          margin: 2px auto 0 !important;
        }
      }
    }
    .left-two {
      height: 45.5% !important;
      .left-title {
        width: 98% !important;
        .item {
          font-size: 12px !important;
          padding: 4px 10px !important;
        }
      }
      .left-box {
        width: 98% !important;
        height: 38% !important;
        margin: 3px auto 0 !important;

        .box-item {
          height: 80px !important;
          p {
            height: 15px !important;
            line-height: 15px !important;
            img {
              width: 20px !important;
              height: 20px !important;
              margin-top: -1px !important;
            }
            span {
              font-size: 14px !important;
              line-height: 18px !important;
            }
          }
          .pp {
            height: 20px !important;
            line-height: 20px !important;
          }
        }
      }
      .left-choose {
        height: 80px !important;
        .ch-title {
          font-size: 14px !important;
          margin: 1px 0 0 2px !important;
        }
        .ch-save {
          // background-color: #40f8d8;
          height: 70% !important;
          margin: 2px auto 0 !important;
        }
      }
    }
    .body-right {
      height: 520px;
      .center {
        margin-left: -5px !important;
        .cen-top {
          width: 98%;
          height: 200px !important;
          .top-moshi {
            width: 100%;
            height: 140px;

            // 调整输入框
            /deep/ .el-input {
              top: 37px;
              width: 60px !important;
            }
            // 修改输入框样式
            /deep/ .el-input__inner {
              padding: 0 5px !important;
            }
            .aaa {
              top: 58% !important;
            }
            .setting {
              width: 60px;
              height: 22px;
              top: 1px;
              left: 60%;
            }
          }
          .set-btn {
            margin: 5px auto 0;
            height: 45px;
          }
        }
      }
      .cen-mid {
        width: 98%;
        height: 160px !important;
        .swiths {
          top: 10px !important;
          left: 80% !important;
        }
        .mid-box {
          width: 95% !important;
          height: 95px !important;
          top: 35px !important;

          .box-item {
            width: 47% !important;
            height: 30px !important;
            line-height: 33px !important;
          }
          .box-item:nth-child(2n) {
            margin-left: 10px;
          }
        }
      }
      .cen-bottom {
        height: 160px !important;
        .mid-box {
          width: 95% !important;
          height: 95px !important;
          top: 35px !important;
          .box-item {
            width: 47% !important;
            height: 30px !important;
            line-height: 33px !important;
          }
          .box-item:nth-child(2n) {
            margin-left: 10px;
          }
        }
      }
      .right {
        .right-top {
          height: 185px;
          width: 95%;
          padding-top: 30px;
          .jindu {
            width: 99%;
            display: flex;
            .jindu-title {
              margin-left: 15px;
            }
            .el-progress {
              width: 150px;
              margin-top: 5px;
              margin-left: 10px;
            }
          }
          .top-box {
            width: 98%;
            height: 65px;
            .top-item {
              width: 45%;
              height: 30px;
              line-height: 30px;
              overflow-y: auto;
              margin-bottom: 10px;
            }
            .top-item:nth-child(2n) {
              margin-left: 20px;
            }
          }
          .bc-btn {
            width: 180px;
            height: 30px;
            margin: 25px auto 0;
            .run {
              width: 80px;
            }
            .stopp {
              width: 80px;
            }
          }
        }
        .ringht-center {
          width: 98%;
          margin: auto;
          margin-top: 3px;
          .cen-title {
            width: 180px;
            height: 25px;
            margin-top: 0px !important;

            display: flex;
            justify-content: space-between;
            .btn1,
            .btn2 {
              width: 48%;
              height: 100%;
            }
          }
          .bb,
          .bc {
            width: 85px;
            height: 22px;
            margin-top: 5px;
            margin-bottom: 5px;
          }
          .bb-con {
            width: 96%;
            height: 70px;
            overflow-y: auto;
            margin: auto;
            .con-item {
              width: 80px;
              margin: 5px 10px 3px 5px;
            }
            .con-active {
              background: linear-gradient(
                0deg,
                rgba(209, 133, 66, 0.4),
                rgba(209, 147, 66, 0.05)
              );
              border: 1px solid #ff9752;
            }
            .zd-btn {
              width: 85%;
              height: 30px;
              .run {
                width: 80px;
              }
              .stopp {
                width: 80px;
              }
            }
          }
          .speed {
            width: 88%;
            margin-left: 0px;
            margin-top: 5px;
            span {
              font-size: 14px;
              color: #62b3e6;
              margin-right: 10px;
              margin-left: 10px;
            }
            span:first-child {
              margin-left: 24px;
            }
            /deep/ .el-select,
            /deep/ .el-input,
            /deep/ .el-input__inner {
              background: linear-gradient(0deg, #1d577c, rgba(29, 87, 124, 0));
              margin-bottom: 5px;
              color: #fff;
              border: 0px;
              border-radius: 5px;
              text-align: center;
              width: 100px;
              height: 25px;
            }
            // 修改下拉框字体
            /deep/ .el-input__inner,
            .el-textarea__inner {
              font-size: 14px;
            }
            // 修改下拉箭头
            /deep/ .el-input__icon {
              height: 120%;
              line-height: 20px;
            }
            /deep/ .el-input__suffix {
              height: auto;
            }
          }
          .go {
            width: 90%;
            height: 80px;
            margin-top: 0px;
            background-image: url("../assets/img/index/control/kongzhibg.png");
            background-size: 100% 100%;
            .goo {
              width: 60px;
              height: 25px;
              position: relative;
              top: 35%;
              left: 5%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .back {
              width: 60px;
              height: 25px;
              position: relative;
              top: 6%;
              left: 70%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .wait {
              width: 60px;
              height: 25px;
              position: relative;
              top: 30%;
              left: 38%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
